Skip to content

refactor(storybook): standardize stories with PlainValuePanel and StoryObj types across React and Vue#152

Merged
Nowely merged 11 commits intonextfrom
update-stories
Mar 15, 2026
Merged

refactor(storybook): standardize stories with PlainValuePanel and StoryObj types across React and Vue#152
Nowely merged 11 commits intonextfrom
update-stories

Conversation

@Nowely
Copy link
Owner

@Nowely Nowely commented Mar 15, 2026

Summary

  • Converts all React and Vue stories from legacy format to StoryObj type with improved type safety using MarkedInputProps
  • Replaces the Text component with a new PlainValuePanel component featuring enhanced styling and functionality
  • Simplifies story components by removing unnecessary local state management and standardizing args usage
  • Adds vitest setup and enhances Vite config for both React and Vue storybooks
  • Refactors withPlainValue helper in both packages with improved structure

Nowely added 11 commits March 15, 2026 12:01
- Added `setupFiles` to Vite configuration for Vitest integration.
- Introduced `vitest.setup.ts` to configure Storybook preview annotations.
- Updated Storybook preview to include `withPlainValue` decorator.
- Refactored Drag stories to utilize new props and improve structure.
… structure

- Updated stories in various components to utilize `StoryObj` for better type safety and consistency.
- Refactored story exports to use args for props, enhancing readability and maintainability.
- Removed unnecessary state management in favor of args, streamlining the story definitions.
- Improved overall structure and organization of story files for clarity.
…rops

- Updated story exports to utilize `MarkedInputProps` for better type safety across various components.
- Refactored `Tagged`, `Chipped`, and other story definitions to improve clarity and maintainability.
- Ensured consistent use of `StoryObj` type for all story exports, enhancing overall structure.
- Updated Drag stories to utilize args for props, improving readability and maintainability.
- Removed unnecessary state management in favor of args, ensuring a more consistent approach across stories.
- Enhanced the `withPlainValue` decorator to better manage controlled and uncontrolled stories.
- Improved overall structure and organization of story files for clarity.
…hanced styling and functionality

- Refactored the Text component into PlainValuePanel, improving structure and readability.
- Introduced new CSS styles for the PlainValuePanel, including responsive design for positioning.
- Added a copy button with feedback and a statistics footer displaying word, character, and line counts.
- Updated the withPlainValue decorator to support dynamic positioning based on container width.
- Changed the default position of the Plain Value panel to 'right' and updated toolbar items for better clarity.
- Removed unnecessary CSS for the dashed divider in the Text component.
- Enhanced the `withPlainValue` decorator to manage global positioning and visibility more effectively, improving responsiveness based on container width.
…y state management

- Removed state management and Text component usage from several stories, streamlining the render functions.
- Updated the Focusable story to change the plainValue parameter from true to 'right'.
- Enhanced the overall structure and readability of the story files by focusing on essential components.
…e Drag stories

- Modified the PlainValuePanel to include a data-value attribute for better data handling.
- Updated Drag stories to utilize the new plainValue parameter for positioning.
- Removed unnecessary state management in story components, enhancing clarity and maintainability.
- Improved the overall structure of the withPlainValue decorator for better responsiveness and functionality.
- Updated `Base.stories.tsx` to improve type safety with `MarkedInputProps` and added `ButtonProps` for better integration.
- Refactored `Dynamic.stories.tsx` to utilize decorators for cleaner rendering logic.
- Simplified rendering in `Experimental.stories.tsx` by removing unnecessary fragments.
- Introduced `TabbedMarkdownView` and `TabbedHtmlView` components in `Nested.stories.tsx` for better code reuse and clarity.
- Created `EventLogStory` in `Slots.stories.tsx` to manage event logging more effectively and improve user interaction tracking.
…ation

- Added `setupFiles` to Vite configuration for Vitest integration.
- Introduced `vitest.setup.ts` for configuring Storybook preview annotations.
- Enhanced `preview.ts` with decorators and global types for better story management.
- Updated multiple story files to utilize the new `withPlainValue` decorator for improved plain value display and interaction.
- Streamlined rendering logic in various stories by adopting args for props, enhancing clarity and maintainability.
- Changed the plainValue parameter from 'right' to 'bottom' in the Configured story for improved layout consistency.
- Ensured alignment with recent updates to story components and their configurations.
@vercel
Copy link

vercel bot commented Mar 15, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markput-react Ready Ready Preview, Comment Mar 15, 2026 9:14pm
markput-vue Ready Ready Preview, Comment Mar 15, 2026 9:14pm
markput-website Ready Ready Preview, Comment Mar 15, 2026 9:14pm

@Nowely Nowely merged commit 42d21f3 into next Mar 15, 2026
10 checks passed
@Nowely Nowely deleted the update-stories branch March 15, 2026 21:18
Nowely pushed a commit that referenced this pull request Mar 15, 2026
🤖 I have created a release *beep* *boop*
---


## [0.6.0](0.5.0...0.6.0)
(2026-03-15)


### Features

* **blocks:** add block merging via Backspace/Delete and TodoList story
([#148](#148))
([0685033](0685033))
* **blocks:** Notion-like block editor with keyboard navigation, block
operations, and drag-and-drop
([#146](#146))
([4bd5534](4bd5534))
* **drag:** replace block mode with drag-and-drop row management
([#149](#149))
([83034e8](83034e8))
* **storybook:** add withPlainValue decorator and enhance drag/text
stories ([#151](#151))
([1d76c1f](1d76c1f))


### Refactoring

* **storybook:** standardize stories with PlainValuePanel and StoryObj
types across React and Vue
([#152](#152))
([42d21f3](42d21f3))


### Miscellaneous

* upgrade to Vite 8, Vitest 4.1, and Astro 6
([#150](#150))
([693966d](693966d))

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant